<template>
  <div id="app">
    <div class="menu">
      <el-menu default-active="1-4-1" class="el-menu-vertical" collapse router v-if="!this.$route.meta.showIf">
      <el-menu-item index="/echarts">
        <i class="el-icon-s-marketing"></i>
        <span slot="title">数据图表</span>
      </el-menu-item>
      <el-menu-item index="/promotions">
        <i class="el-icon-office-building"></i>
        <span slot="title">产品推广</span>
      </el-menu-item>
      <el-menu-item index="/frum">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">论坛管理</span>
      </el-menu-item>
      <el-menu-item index="/users">
        <i class="el-icon-user"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
    </el-menu>
    </div>
    <router-view></router-view>
    
  </div>
</template>

<script>



export default {
  name: 'App',

};
</script>
<style scoped>
body {
  box-sizing: border-box;
}
#app {
  display: flex;
  background-color: #f8f9fa;
}

.menu {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu-vertical {
  height: 70%;
  width: 73px;
  border-top: solid 1px #e6e6e6 !important;
  border-bottom: solid 1px #e6e6e6 !important;
  box-shadow: 0 0 5px rgba(10, 17, 54, 0.2);
}
/* :deep(.el-menu) {
  border-top: solid 1px #e6e6e6 !important;
  border-bottom: solid 1px #e6e6e6 !important;
} */
</style>
